<template>
    <div class="father">
      <h1>$attrsFather组件</h1>
      <h2>父组件先通过props将数据传给Child,然后Child动态绑定$attrs,grandson通过defineprops接收</h2>
      <h1>Father的数据:a:{{ a }},b:{{ b }},c:{{ c }},d:{{ d }},e:{{ e }}</h1>
      <button @click="updateData">Father自带的方法a+2</button>
      <!-- 先给Child传递数据和方法 -->
      <Child :a="a" :b="b" :c="c" :d="d" :e="e" :updateFatherA="updateFatherA"/>
    </div>
  </template>
  
  <script lang="ts" setup>
    import { ref } from "vue";
    import Child from './Child.vue'

    const a = ref(1)
    const b = ref(2)
    const c = ref(3)
    const d = ref(4)
    const e = ref(5) 

    function updateData(){
        a.value += 2
    }

    function updateFatherA(value: number){
      a.value += value
    }
  </script>
  
  <style scoped>
  </style>